<template>
  <div>
    <Search :mess="mess"></Search>
    <div class="box">
      <van-tree-select
        :items="data"
        height="100%"
        :active-id.sync="activeId"
        :main-active-index.sync="activeIndex"
        @click-nav="leftfn"
      >
        <template slot="content">
          <h3>{{ title }}</h3>
          <div v-for="(item, index) in contentright" :key="index">
            <img :src="item.image" alt="" />
            {{ item.text }}
          </div>
                   
        </template>
      </van-tree-select>
    </div>

    <Tabbar></Tabbar>
  </div>
</template>



<script>
import Tabbar from "../components/tabbar.vue";
import Search from "../components/mysearch.vue";

import instance from "../api/index";

export default {
  name: "class",
  data() {
    return {
      mess: "分类搜索",
      data: [],
      activeId: 1,
      activeIndex: 0,
      contentright: [],
      title: null,
    };
  },
  methods: {
    async getdata() {
      let data = await instance.get("/type");
      this.data = data.data;
      this.contentright = this.data[0].children;
      this.title = this.data[0].text;
    },
    leftfn(item) {
      // console.log(item) 点击左侧的索引
      this.activeIndex = item;
      this.contentright = this.data[item].children;
      this.title = this.data[item].text;

      var xx = document.getElementsByClassName('van-tree-select__content')
      xx[0].scrollTop = 0

    },
  },
  created() {
    this.getdata();
  },
  components: {
    Tabbar,
    Search,
  },
};
</script>

<style scoped lange="less">
.box {
  height: calc(100vh - 104px);
}
.van-sidebar::-webkit-scrollbar {
  display: none;
}
.van-tree-select__content::-webkit-scrollbar {
  display: none;
}
</style>